<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>

    <van-notice-bar color="#1989fa" background="#fff" left-icon="bar-chart-o">
      {{ question.name }}
    </van-notice-bar>
    <div v-if="question.category == 0">
      <van-cell-group>
      <van-card
        v-for="item in question.choices"
        :price="item.vote_nums"
        :title="item.name"
        :thumb="item.images.length > 0 ? item.images[0].image: '-'"
        :key="item.id"
        centered
      >
      <template #price>
        <div style="padding: 10px 0">
            {{item.vote_nums + ' 票'}}
        </div>
        </template>
      </van-card>
      </van-cell-group>
    </div>
    <div v-if="question.category == 1">
      <van-cell-group>
        <van-cell
          v-for="item in question.choices"
          :key="item.id"
          :title="item.name"
          :value="item.vote_nums + '票'"
          :center="true"
        >
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getQuestionById } from "@/api/polls";

export default {
  name: "QuestionResult",

  props: ["question_id"],

  components: {
    NavBar,
  },

  data() {
    return {
      title: this.$route.meta.title,

      question: {
        id: null,
        name: "",
        begin_date: null,
        end_date: null,
        category: 0,
        choices: [],
      },
    };
  },

  created() {
    this.getQuestion();
  },

  methods: {
    getQuestion() {
      getQuestionById(this.question_id)
        .then((res) => {
          this.question = res.data;
        })
        .catch((error) => {
          this.$notify({ type: "danger", message: "读取数据失败" + error });
        });
    },
  },
};
</script>

<style  scoped>
.van-cell-group {
  padding: 0 10px;
}
.van-cell__title {
  flex: 5;
}
.van-row {
  margin: 32px;
}
.van-card{
  font-size: 16px;
}
.van-card__price{
  font-size: 16px;
}
</style>